Embedded style sheets enable the web page designer to embed a CSS document inside the head section of an XHTML section as was done here. And, whew, I have finally got to the point in this tutorial where I can use my favorite Ariel font. The style element defines the embedded style sheet; the type attribute "text/css" defines this as a CSS. Elements appearing in the document are listed with a style for each enclosed in {...}. The web browser attempts to use the fonts specified in the font-family list in order because a given user's computer may not have every font installed. Note that the default style of an element, e.g. <h1> for a large header, still applies - it is not overridden by the style element.
A style element starting with a period defines a style class, named ughblue in this case. The style class is applied only to elements which include the class attribute
Note that the class only extends as far as the element which includes it.
We have seen that styles can be declared in many places:
Styles can also come from a web browser, or from user preferences. For this reason, style sheets are called cascading. But how do they cascade in case of conflicts between styles? The usual rule is: author of document, then user, then web browser. And most styles declared in a parent element are inherited by its child (nested) elements, but there are exceptions so you need to experiment. If a style is explicitly declared in a child element and is more specific than that declared in the parent, then the child specifity overrules inheritance from parent.
e.g. the style for the <em> (italics) element with its color black, overruled the class ughblue in this case.
Click here for a more complex example of inherted stylesBy using external style sheets (not used here in Part 6), we can truly separate content from presentation style. The XHTML contains only the content, the CSS contains only the style. This has many advantages:
The next part of this tutorial will use an external style sheet.
Click here for part 7